import { type FC, memo, useEffect, } from 'react'
import classNames from 'classnames'
import { Checkbox, Form, Input, Radio, Select } from 'antd';
import contentStyle from '../index.module.scss'
import styles from './index.module.scss'
import Layout from './layout'
import Spacing from './spacing'
import Colors from './colors'
import Header from './header'
import { useStore } from '@/store'
import { options } from '@/app/utils';

interface IndexProps {
  onConfirm?: () => void
}
export function Template() {
  const [form] = Form.useForm()
  const { tempInfo, setTempInfo } = useStore()
  const { title, description, templateName, order, classify } = tempInfo

  const getOptions = (v) => {
    const arr = []
    options.forEach((item) => {
      if ((item.value & v) > 0) {
        arr.push(item.value)
      }
    })
    return arr
  }
  useEffect(() => {
    form.setFieldsValue({
      title, description, templateName, order, classify: getOptions(classify)
    })
  }, [])
  return <div className={classNames(styles.templates, contentStyle.card)} >
    <Form form={form} labelCol={{ style: { width: '100px' } }} onValuesChange={(_, values) => {
      setTempInfo({
        ...values,
        classify: (values.classify || []).reduce((o, n) => {
          return o + n
        }, 0)
      })
    }}>
      <Form.Item label='模板标题' name='title'>
        <Input></Input>
      </Form.Item>

      <Form.Item label='模板描述' name='description'>
        <Input.TextArea></Input.TextArea>
      </Form.Item>
      <Form.Item label='模板名称' name='templateName'>
        <Input></Input>
      </Form.Item>
      <Form.Item label='分类' name='classify'>
        <Select mode='multiple' options={options.filter(t => t.type !== 'list')}></Select>
      </Form.Item>
      <Form.Item label='排序' name='order'>
        <Input></Input>
      </Form.Item>
      {/* <Form.Item label='状态' name='show' >
        <Radio.Group>
          <Radio value={1}>上线</Radio>
          <Radio value={0}>下线</Radio>
        </Radio.Group>
      </Form.Item> */}

    </Form>

  </div>
}
const Index: FC<IndexProps> = () => {
  return (<div className={styles.customization}>
    {/* <Template /> */}
    <Layout />
    <Header />
    <Spacing />
    <Colors />
    {/* <Module /> */}
  </div>)
}

export default memo(Index)
